<template>
  <div class="wrapper">
    <div id="myEcharts"></div>
    <el-select
      v-model="work_biye_time"
      placeholder="请选择性别"
      @change="hanleChange(work_biye_time)"
    >
      <el-option label="2020" value="2020"></el-option>
      <el-option label="2019" value="2019"></el-option>
      <el-option label="2018" value="2018"></el-option>
      <el-option label="2017" value="2017"></el-option>
      <el-option label="2016" value="2016"></el-option>
    </el-select>
  </div>
</template>

<script>
import { sendEchartsMap } from "@/api/data";
export default {
  data() {
    return {
      servers: [],
      work_biye_time: "2020",
    };
  },
  async mounted() {
    let data1 = sessionStorage.getItem("maplist");
    if (data1) {
      this.servers = JSON.parse(data1);
      this.echartsinit();
      return;
    }
    this.hanleChange()
  },

  methods: {
    // 处理数据
    chuli(val) {
      for (let i = 0; i < val.length; i++) {
        val[i].name = val[i].name
          .replace("省", "")
          .replace("市", "")
          .replace("自治区", "")
          .replace("特别行政区", "")
          .replace("回族", "")
          .replace("壮族", "")
          .replace("维吾尔", "");
      }

      return val;
    },
    // 用户开启了筛选
    async hanleChange(val) {
      if (val != "不限") {
        let data = await sendEchartsMap({
          work_biye_time: this.work_biye_time,
          work_jiuye: "就业",
        });

        this.servers = this.chuli(data.data);
      } else {
        this.servers = JSON.parse(sessionStorage.getItem("maplist"));
      }
      this.echartsinit();
    },

    // 渲染map
    echartsinit() {
      //初始化echarts实例
      var myChart = echarts.init(document.getElementById("myEcharts"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "全国就业分布",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["全国就业分布"],
        },
        visualMap: {
          type: "piecewise",
          pieces: [
            {
              min: 500,
              max: 99999,
              label: "就业人数500+人",
              color: "#09223a",
            },
            {
              min: 100,
              max: 500,
              label: "就业人数500-1000人",
              color: "#4677a5",
            },
            {
              min: 50,
              max: 100,
              label: "就业人数50-100人",
              color: "#8aacca",
            },
            {
              min: 1,
              max: 50,
              label: "就业人数1-50人",
              color: "#c7cfd6",
            },
          ],
          color: ["#E0022B", "#E09107", "#A3E00B"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "left",
          top: "center",
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: false,
            },
            restore: {
              show: true,
            },
            saveAsImage: this.$store.getters.isShow,
          },
        },
        roamController: {
          show: true,
          left: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: "就业人数",
            type: "map",
            mapType: "china",
            roam: false,
            label: {
              show: true,
              color: "rgb(249, 249, 249)",
            },
            data: this.servers,
          },
        ],
      };

      myChart.setOption(option); //使用指定的配置项和数据显示图表
    },
  },
};
</script>

<style lang="scss" scoped>
div.wrapper {
  height: calc(100vh -120px);
  text-align: center;
  padding: 50px 20px;
  display: flex;
  justify-content: center;

  #myEcharts {
    width: 800px;
    height: 500px;
  }
}

.el-select {
  margin-left: 20px;
  width: 130px !important;
}
</style>